<template>
    <div style="width: 100%;">
        <div class="card">
            <NSpace vertical>
                <NCard hoverable>
                    <template #header>
                        <strong>
                            博文列表
                        </strong>
                    </template>
                    <template #header-extra>
                        <NButton @click="publishHandle" type="success">去发表</NButton>
                        <!-- 显示：全部 -->
                    </template>
                </NCard>
                <BlogOverlook v-for="(i, k) in blogList" :data="i"></BlogOverlook>
                <NCard hoverable>
                    <NPagination v-model:page="page" v-model:page-size="pageSize" show-size-picker show-quick-jumper
                        :page-sizes="[1, 3, 10, 20]" :page-count="Math.ceil(blogsCount / pageSize)">
                    </NPagination>
                </NCard>
            </NSpace>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { NCard, NPagination, NSpace, NButton } from "naive-ui";
import BlogOverlook from "@/components/BlogOverlook.vue";

import blogUtils from "@/api/blog";
import { useRouter } from "vue-router";

const router = useRouter();

const blogList = ref([] as Array<{}>);

const page = ref(1);
const blogsCount = ref(100);
const pageSize = ref(10);


blogUtils.count().then(
    (data) => {
        console.log("count of blogs is", data);
        blogsCount.value = data;
    }
).catch((err) => {
    console.log(err);
});

watch([page, pageSize], () => {
    console.log("ch", page.value, pageSize.value);
    updateHandle();
});

function updateHandle(): void {
    blogUtils.list(page.value, pageSize.value).then(
        (data) => {
            console.log(data);
            blogList.value.length = 0;
            blogList.value.push(...data);
        }
    ).catch((err) => {
        console.log(err);
    });
}

updateHandle();

function publishHandle() {
    router.push({ name: "write_blog" })
}


</script>


<style scoped>
@media (max-width: 599px) {
    .card {
        width: calc(599px - 200px);
        max-width: 100%;
        margin: auto;
    }
}

/* 当视口宽度大于或等于600px时 */
@media (min-width: 600px) {
    .card {
        width: calc(100% - 200px);
        margin-left: 100px;
        margin-right: 100px;
    }
}

.card {
    margin-top: 1rem;
}
</style>